// ARROW BUTTONS TO TOGGLE DISPLAY OF LEFT/RIGHT DOCKS
.atom-dock-toggle-button {
  .atom-dock-toggle-button-inner {
    background: @seti-primary;
    border:     0;
    color:      @seti-primary-text;
  }
}

// WITHOUT TITLE BAR
atom-workspace.hide-title-bar {
  &:not(.hide-project-tab) {
    atom-dock {
      .list-inline.tab-bar {
        height:        @top-bar*1.25;
        .tab {
          height:      @top-bar*1.25;
          padding-top: 20px;
        }
      }
    }
  }
}

atom-workspace.hide-project-tab {

  .project-root > .header {
    padding-top: 25px;
  }

  // SINGLE TAB
  .tab {
    &[data-type="TreeView"] {
      display: none;
    }
  }

  &:not(.seti-compact) {
    .tool-panel.tree-view {
      top: -1 * @top-bar;
    }
  }

  &.seti-compact {
    .tool-panel.tree-view {
      top: -1 * @top-bar-small;
    }
  }

}

// COMPACT
atom-workspace.seti-compact {
  atom-dock {
    .list-inline.tab-bar {
      height:        @top-bar-small;
      .tab {
        height:      @top-bar-small;
        line-height: @top-bar-small;
        padding-top: 0px;
        .title {
          line-height: @top-bar-small;
          &::before {
            height:              @top-bar-small;
            line-height:         @top-bar-small;
          }
        }
      }
    }
  }
}

atom-dock {

  .atom-dock-toggle-button .atom-dock-toggle-button-inner {
    background: @seti-primary;
    color: @seti-primary-text;
  }

  .github-StagingView-group.is-focused .is-selected {
    background: @seti-primary;
    color: @seti-primary-text;
  }
  .is-selected {
    color: @seti-primary-text;
  }

  .list-inline.tab-bar {
    height:     @top-bar;
    background: @tree-view-background-color;

    // SINGLE TAB
    .tab {
      background-color: @tree-view-background-color;
      border-left:      solid 1px rgba(0,0,0,0.4);
      color:            @tab-text-color;
      height:           @top-bar;
      line-height:      @tab-height;

      &.active {
        background-color: @tree-view-background-color;
        &::after {
          width:      100%;
          left:       0px;
          opacity:    1;
          background: @seti-primary;
        }
      }

      .title {
        line-height: @tab-height;
        font-size:   12px;
        font-weight: 100;
        &::before {
          content:   '';
        }
        &.icon-octoface {
          .icon('github', @tab-text-color);
          &::before {
            margin-right: 10px;
          }
        }

        &.icon-git-commit {
          .icon('git_folder', @tab-text-color);
          &::before {
            margin-right: 10px;
          }
        }
      }

      &[data-type="TreeView"] {
        border:    0;
        max-width: none;
        .title::before {
          background:          url('atom://seti-ui/icons/project.svg') no-repeat;
          background-position: center;
          background-size:     80%;
          height:              @tab-height;
          line-height:         @tab-height;
          width:               30px;
        }
        &.active {
          &::after {
            background: @seti-primary;
          }
        }
      }

      &:hover .close-icon {
        color: @red;
      }

      &.modified {

        &:not(:hover) .close-icon {
          border-color: @yellow;
          top:          26px;
          right:        14px;
        }

      }

      // HIGHLIGHT BORDER
      &::after {
        content:  '';
        position: absolute;
        width:    0%;
        height:   2px;
        z-index:  999;
        bottom:   -2px;
        left:     50%;
        opacity:  0;
      }

    }

  }
}
